<template>
  <div class="app-container">
    <div class="mainbox">
      <div class="filter-container">
        <el-form ref="filterFormRef" :inline="true" :model="filterForm">
          <el-form-item label="业务系统" prop="systemName">
            <el-select v-model.trim="filterForm.systemName" placeholder="请选择">
              <el-option v-for="(item) in systemList" :key="item.systemId" :label="item.systemName"
                         :value="item.systemName" />
            </el-select>
          </el-form-item>
          <el-form-item label="商户名称" prop="merchantName">
            <el-select v-model="filterForm.merchantName" filterable remote
                       reserve-keyword placeholder="（查询搜索框）" :remote-method="remoteMethod"
                       :loading="selectLoading">
              <el-option v-for="item in merchantOptions" :key="item.id" :label="item.merchantName"
                         :value="item.merchantName">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="交易渠道" prop="chn">
            <el-select v-model.trim="filterForm.chn" placeholder="请选择交易渠道">
              <el-option label="全部" value="" />
              <el-option label="银行卡渠道" value="1" />
              <el-option label="扫码渠道" value="2" />
              <el-option label="手机APP渠道" value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="财务日期" prop="myDate">
            <el-date-picker v-model="filterForm.myDate" type="date" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-form>
        <div class="flex-1" />
        <div>
          <el-button type="primary" @click="handleFilter">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </div>
      </div>
      <!-- 对账（三方对账） -->
      <div class="table-container">
        <div style="margin-bottom: 20px">
          <el-button type="primary">导出</el-button>
          <el-button type="primary">导出原始记录</el-button>
        </div>
        <el-table :data="tableData" @selection-change="handleSelectionChange" align="center">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column type="index" label="序号" width="65">
          </el-table-column>
          <el-table-column prop="date" label="业务系统" align="center">
          </el-table-column>
          <el-table-column prop="order" label="商户订单号" align="center">
          </el-table-column>
          <el-table-column prop="result" label="对账结果" align="center">
          </el-table-column>
          <el-table-column prop="remark" label="备注" align="center">
          </el-table-column>
          <el-table-column label="统一支付平台" align="center">
            <el-table-column prop="myTime" label="订单申请时间" align="center">
            </el-table-column>
            <el-table-column prop="myNum" label="交易流水号" align="center">
            </el-table-column>
            <el-table-column prop="merchantName" label="商户名称" align="center">
            </el-table-column>
            <el-table-column prop="money" label="交易金额（元）" align="center">
            </el-table-column>
            <el-table-column prop="chn" label="交易渠道" align="center">
            </el-table-column>
            <el-table-column prop="myState" label="交易状态" align="center">
            </el-table-column>
          </el-table-column>
          <el-table-column label="三方支付公司" align="center">
            <el-table-column prop="myTime" label="订单申请时间" align="center">
            </el-table-column>
            <el-table-column prop="myNum" label="交易流水号" align="center">
            </el-table-column>
            <el-table-column prop="merchantName" label="商户名称" align="center">
            </el-table-column>
            <el-table-column prop="money" label="交易金额（元）" align="center">
            </el-table-column>
            <el-table-column prop="chn" label="交易渠道" align="center">
            </el-table-column>
            <el-table-column prop="myState" label="交易状态" align="center">
            </el-table-column>
          </el-table-column>
        </el-table>
        <div class="footer-pagination">
          <el-pagination :current-page="filterForm.pageNo" :page-size="filterForm.pageSize" :total="total"
                         :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper" v-if="total>0"
                         @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { qryUserSystemAuth } from '@/api/unifiedPayment/tradeQuery'
import { qryAuthMerchantByName } from '@/api/unifiedPayment/merchantMange'

export default {
  name: 'ReconciliationDetail',
  data() {
    return {
      total: 0,
      filterForm: {
        systemName: '',
        merchantName: '',
        chn: '',
        myDate: '',
        pageNo: 1,
        pageSize: 10
      },
      systemList: [],
      selectLoading: false,
      merchantOptions: [],
      tableData: []
    }
  },
  mounted() {
    this.getSystemList()
  },
  methods: {
    handleSelectionChange() {},
    handleFilter() {
      this.getList()
    },
    handleReset() {
      this.filterForm = {
        systemName: '',
        merchantName: '',
        chn: '',
        myDate: '',
        pageNo: 1,
        pageSize: 10
      }
      this.handleFilter()
    },
    getList() {},
    handleSizeChange(pageSize) {
      this.filterForm.pageNo = 1
      this.filterForm.pageSize = pageSize
      this.getList()
    },
    handleCurrentChange(current) {
      this.filterForm.pageNo = current
      this.getList()
    },
    getSystemList() {
      qryUserSystemAuth().then((res) => {
        this.systemList = res.data
      })
    },
    remoteMethod(query) {
      if (query !== '') {
        this.selectLoading = true
        qryAuthMerchantByName(query).then((res) => {
          this.selectLoading = false
          this.merchantOptions = res.data
        })
      } else {
        this.merchantOptions = []
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.footer-pagination {
  margin-top: 20px;
  text-align: right;
}
</style>
